import React, { useState, useEffect } from 'react'
import axios from 'axios'

export default function BestFetchData() {
    const [data, setData] = useState(0)
    const [query, setQuery] = useState('')
    const [url, setUrl] = useState('http://wthrcdn.etouch.cn/weather_mini?city=青岛')
    useEffect(() => {
        const fetchData = async () => {
            const ret = await axios(url)
            setData(ret.data.data)
        }
        fetchData()
    }, [url])
    return (
        <div>
            <h2>可输入内容再搜索</h2>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            <button type='button' onClick={() => setUrl('http://wthrcdn.etouch.cn/weather_mini?city=' + query)}>搜索</button>

            {data && <>
                <p><strong>城市：</strong>{data.city}</p>
                <p><strong>当前温度：</strong>{data.wendu}℃</p>
                <p><strong>感冒预警：</strong>{data.ganmao}</p>
                <h4>未来{data.forecast?.length}天天气情况</h4>
                <ul>
                    {data.forecast?.length
                        ? data.forecast.map(item => <li key={item.date}>{`${item.date} - ${item.type} - ${item.low}~${item.high}`}</li>)
                        : null}
                </ul>
            </>}

        </div>
    )
}
